<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>共享屏幕</title>
  <style>
    * {
      box-sizing: border-box;
    }

    #rtcPlayer {
      margin: 20px;
      background: deepskyblue;
      display: block;
      border-radius: 2px;
      box-shadow: 0 1px 1.5px 1px rgba(0, 0, 0, 0.12);
      width: 1024px;
      height: 768px;
    }
  </style>
</head>
<body>
<video id="rtcPlayer" autoplay>start record</video>
<button id="start">start</button>
<button id="stop">stop</button>
<script>
  const $video = document.querySelector('#rtcPlayer');
  const $start = document.querySelector('#start');
  const $stop = document.querySelector('#stop');
  const constraints = {
    video: {
      cursor: "never"
    },
    audio: false
  };

  function startMediaDisplay () {
    navigator.mediaDevices.getDisplayMedia(constraints)
      .then((stream) => $video.srcObject = stream)
      .then(console.log, console.error);
  }

  function stopMediaDisplay () {
    const tracks = $video.srcObject.getTracks();
    tracks.forEach(track => track.stop());
    $video.srcObject = null;
  }

  $start.onclick = startMediaDisplay;
  $stop.onclick = stopMediaDisplay;
</script>
</body>
</html>
